<template>
    <el-checkbox-group v-model="checkList" :style="myStyle" class="box" v-if="!isRadio">
        <el-checkbox v-for="item in dataList" v-bind:key="item" :label="item" :class="isHit ? 'pd3' : ''" />
    </el-checkbox-group>
    <div v-if="isHit&&!isRadio" class="pd3">{{ hits }}</div>

    <el-radio-group v-model="radio" v-if="isRadio" style="height: 24px;">
        <el-radio v-for="item in dataList" v-bind:key="item" :label="item" :class="isHit ? 'pd3' : ''" >{{ item }}</el-radio>
    </el-radio-group>
</template>
  
<script>

export default {
    name: 'CommonRadio',
    emits: ['returnData'],
    components: {
    },
    props: {
        dataList: {
            default: []
        },
        isMust: {
            default: false,
            type: Boolean
        },
        myStyle: {
            default: {}
        },
        radioDefault: {
            default: ''
        },
        mustHit: {
            default: '',
            type: String
        },
        isRadio: Boolean
    },
    data() {
        return {
            checkList: [],
            hits: this.hit,
            isHit: false,
            radio: this.radioDefault
        }
    },
    mounted() {
    },
    methods: {
        inputReturn() {
            
            let flag = true
            if (this.isMust && this.checkList.length == 0&&!this.isRadio) {
                this.hits = this.mustHit
                this.isHit = true
                flag = false
            }
            if(this.isRadio&&!String(this.radio)?.trim()||this.isRadio&&this.radio==null){
                this.hits = this.mustHit
                this.isHit = true
                flag = false
            }
            return flag
        }
    },
    watch: {
        checkList: {
            handler() {
                if (this.checkList.length > 0) {
                    this.isHit = false
                }
                return this.$emit('returnData', this.checkList.join(","))
            }
        },
        radio: {
            handler() {
                this.isHit = false
                return this.$emit('returnData', this.radio)
            }
        },
        radioDefault() {
            this.radio = this.radioDefault
        }
    },
    computed: {
    }

}
</script>
    
<style scoped>
::v-deep(.el-checkbox__inner) {
    z-index: 0;
}

::v-deep(.el-checkbox__label) {
    font-size: 12px;
}

::v-deep(.el-radio) {
    display: block;
    height: 17px;
    align-items: center;
}

.pd3 {
    color: red;
    font-size: 13px;
}

.box {
    display: flex;
    align-items: center;
    /* flex-wrap: wrap; */
}
</style>